<template>
  <div class="resource-wrapper">
    <div class="title">
      <div>业务资源</div>
      <el-tag type="success" :closable="currentCategory.name != ''" @close="searchFormActions.clearCategorySelect">
        {{ currentCategory.name != '' ? currentCategory.name : '未选择' }}
      </el-tag>
    </div>
    <div class="tool">
      <el-button type="primary" :disabled="currentCategory.name == ''" @click="dataActions.add">新建</el-button>
      <el-button :icon="Delete" :disabled="table.selected.length == 0">批量删除</el-button>
    </div>
    <el-table 
    ref="tableRef"
    :data="table.data" 
    highlight-current-row 
    style="width: 100%; margin: 15px 0;"
    @current-change="tableActions.currentChange"
    @selection-change="tableActions.selectionChange"
    v-loading="state.loading"
    >
      <el-table-column type="selection" width="30" />
      <el-table-column prop="name" label="资源名称" />
      <el-table-column prop="code" label="资源编码" />
      <el-table-column prop="address" label="操作" width="110">
        <template #default="{ row }">
          <el-button type="primary" link @click="dataActions.edit(row)">编辑</el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="flex justify-end" background layout="total, sizes, prev, pager, next" :total="pg.total"
      :current-page="pg.current" @size-change="pgActions.sizeChange" v-model:page-size="pg.size"
      @current-change="pgActions.currentChange" :page-sizes="[20, 30, 50]" />
    <ResourceDialog ref="dialog" @success="tableActions.getList" :category-id="currentCategory.id" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { pageResource } from '/@/api/businessResource';
import ResourceDialog from './ResourceDialog.vue';
import { Delete } from '@element-plus/icons-vue';

const dialog = ref()
const tableRef = ref()

const state = reactive({
  loading: false,
});

const currentCategory = reactive({
  name: '',
  id: ''
})

const table = reactive({
  data: [],
  selected: [] as any,
});

const emit = defineEmits(['clear', 'current-change'])
const searchFormActions = {
  async onSearch() {
    tableActions.getList();
  },
  clearCategorySelect() {
    currentCategory.name = '';
    currentCategory.id = '';
    table.data = []
    emit('clear')
    tableActions.currentChange({ name: '', id: '' })
  },
};

const tableActions = {
  async getList() {
    if (currentCategory.id == '') return
    state.loading = true;
    let params = {
      startIndex: pg.current,
      pageSize: pg.size,
      categoryId: currentCategory.id
    };
    let { data } = await pageResource(params);
    state.loading = false;
    table.data = data.list;
    pg.total = data.total;
    table.selected = [];
  },
  selectionChange(v) {
    table.selected = v;
  },
  currentChange(val) {
    emit('current-change', val)
  },
};

const pg = reactive({
  current: 1,
  size: 20,
  total: 0,
});

const pgActions = {
  resetPg: () => {
    pg.current = 1;
    pg.size = 20;
    pg.total = 0;
  },
  currentChange(r) {
    pg.current = r;
    tableActions.getList();
  },
  sizeChange(r) {
    pg.current = 1;
    pg.size = r;
    tableActions.getList();
  },
};

const dataActions = {
  add: () => {
    dialog.value.openDialog()
  },
  edit: (row:any) => {
    dialog.value.openDialog(row)
  }
}

const changeCategory = (data:any) => {
  currentCategory.id = data.id
  currentCategory.name = data.name
  tableActions.getList()
}

const clearSelection = () => {
  tableRef.value!.setCurrentRow()
}

defineExpose({ changeCategory, clearSelection })
</script>

<style lang="less" scoped>
.resource-wrapper {
  background: #fff;
  width: calc(35% - 20px);
  // height: calc(100vh - 120px);
  padding: 15px;
  margin-left: 20px;
}
.title {
  font-size: 18px;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #262626;
  display: flex;
  > div {
    margin-right: 10px;
  }
}
.tool {
  display: flex;
  justify-content: flex-end;
}
</style>